Design guidelines for Opera TV Store Applications
Introduction
While most regular design principles apply to TV, there are some major differences that should be taken into consideration when designing applications for the TV space. TV has traditionally been less interactive than most other devices, and even the user's proximity to the device is different, posing some challenges. The purpose of this document is to highlight the differences that should be taken into consideration when designing Opera TV Store applications
TV viewer
User's distance
In a typical living room set-up, viewers are seated at a certain distance away from the TV. This is in contrast to a typical PC setup, where the user is sitting right in front of the monitor. It is therefore very important to make a clean, clear design that can be easily viewed and used from a distance. Here are some points to take into consideration:
- All application elements and text need to be bigger than those used for computers.
- Fonts should be big and clean; we recommend using simple sans-serif fonts.
- More empty space is needed between elements to avoid items blending into each other from a distance and creating clutter.
- When items are selected, the highlight should be visible and clear so there is never any doubt what is selected.
- Light content on a darker background is usually easier to read/view on a TV.
- Do not be tempted to think that a bigger screen means that you can include more content; less is more. Only include relevant content, and keep the amount of content on each screen to a minimum.
Resolutions and overscan
The following resolution is always supported:
- 1280×720
The following resolutions are optional and may be always be available:
- 960x540
- 1920×1080
All of today's TV sets have overscan. Overscan means that margins of your application are shown outside the visible area of the TV. While it is possible to turn off overscan it is better to design your application taking this invisible margin into consideration as most users do not know of its existence. The overscan amount varies between TV sets but it is advisable to assume that a 5% margin might not be visible to the user.
We recommend that you test your applications on all these resolutions, with overscan turned both on and off.
Navigation
TV users are usually limited to a simple 4-way navigation (up/down/left/right) with a regular remote, and spatial navigation is the only form of navigation supported in Opera TV Store Applications. Therefore, you should strive to make navigation as simple as possible.
Navigation usually works best with a rectangular/list design, where it is very clear which item is above or below, and to the left and right of the selected item. Avoid navigation that requires users to jump diagonally to another item.
Avoid mixing vertical and horizontal navigation; it is better to rely solely on either horizontal or vertical columns, rather than mixing the two. Avoid putting content that is critical for user navigation at the top or bottom of a list, otherwise users may be forced to go through the list to select it.
TVs tend to have more horizontal screen space, often making horizontal navigation preferable, but this depends on the application.
Try to avoid elements that need to be enabled or clicked first before interacting with them. For example, do not make a list that you need to click first to be able to navigate through it. If you have an element that contains sub-elements (for example, in a list) make it visually obvious that you need to click the item first, before you can select sub-elements.
Text input
Historically, TVs have required very little interaction other than flipping between channels. Even if remotes are becoming more advanced, they are still relatively primitive and are rarely optimized for text input. Some TVs are shipped with external keyboards but it is best not to rely on them.
TV remote
A user's experience would be diminished if, having just gotten comfortable on the couch, he or she realizes that the keyboard is on the other side of the living room. We recommend designing your application in a way that avoids the need for text input as much as possible. Here are a few suggestions:
- Provide viewing content suggestions to the user rather than relying on searching.
- Make it possible to navigate to content through logical categories.
- Always include "smart" autocompletion in search/edit fields, if this is possible.
- Let the user choose to stay in a logged-in state in applications that require login. This option could be given as a pre-selected "Keep me logged in" checkbox on the login screen.
Responsiveness
TVs are still running on relatively low-end hardware and TV remotes are still relatively unresponsive. This makes it extremely important that your applications feel as responsive as possible, so as not to create an additional bottleneck. Here are a few things to keep in mind:
- Make selection highlighting very visible so the viewer never needs to spend time looking for it.
- Always include some kind of progress indicator if the operation is not instant.
- Make sure animation is not at the expense of performance; if an animation isn't smooth, or adds a performance bottleneck, disable it.
We highly recommend that you test your application on an actual TV.
Embedded media
Media content will rely on plug-ins that are often not optimized for TVs and require complicated interaction. If you do not have full control over the navigation within the plug-in, try to design your content in such a way that you need the least amount of interaction possible with the plug-in. Ideally no interaction should be needed. Alternatively you could include required basic controls outside the plug-in, and make them easily accessible. This can sometimes be done with JavaScript.
If you have full control over the plug-in interaction, design it bearing in mind the same navigation considerations as for the rest of the application.